<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 500px;
            height: 500px;
            background: blue;
        }
        .center{
            width: 300px;
            height: 300px;
            background: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>
    <script>
        // window---document----html---- body ---- outer --- center --- inner
        var outerEle = document.querySelector(".outer");
        var centerEle = document.querySelector(".center");
        var innerEle = document.querySelector(".inner");
        // 1.元素 由小到大来依次触发事件 叫事件的冒泡机制；
        // 2.元素由大到小来移除触发事件  叫事件捕获机制；
        // 默认是冒泡机制； 和 addEventListener 第三个参数有关系 默认是false 冒泡机制；
        // 捕获触发事件 第三个参数写成true

        window.addEventListener("click",function(){
            console.log("window")
        },true)

        document.addEventListener("click",function(){
            console.log("document");
        },true)
        document.documentElement.addEventListener("click",function(){
            console.log("html")
        },true)

        document.body.addEventListener("click",function(){
            console.log("body");
        },true)

        outerEle.addEventListener("click",function(){ 
            console.log("outer");
        },true)

        centerEle.addEventListener("click",function(){
            console.log("center");
        },true)

        innerEle.addEventListener("click",function(e){
            console.log("inner",e);
        },true)


        // 目标元素 ；可以通过事件对象来获取 e.target；


    </script>
</body>
</html>